<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>搜索详情列表</title>
    <link href="../../css/style.css" rel="stylesheet" type="text/css" />
    <link href="../../css/mui.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/certify.css">
    <link rel="stylesheet" href="../../src/iconfont/iconfont.css">
    <style>
        * {
            outline: none;
            webkit-focus-ring-color: rgba(0, 0, 0, 0);
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
        }
        
        #schools {
            background: #fff;
        }
        
        .IndOneP {
            position: relative;
        }
        
        .chengqu {
            font-size: 12px;
            float: left;
            /* margin-right: 10px; */
        }
        
        .bg.mui-media-object {
            width: 1.8rem;
            height: 1.5rem;
        }
        
        .IndOneE span {
            display: inline-block;
            height: 18px;
            line-height: 18px;
        }
        /* input[type='search'] {
            border: solid 1px #e9e9e9;
            border-radius: 20px;
        } */
        
        .guanzhu {
            /* border: solid 1px #25aae3; */
            position: absolute;
            right: 0px;
            top: 0px;
            font-size: 12px;
            width: 60px;
            padding-top: 1px;
            padding-bottom: 1px;
            text-align: center;
            color: #ffffff;
            background-color: #FECF0E;
            border-radius: 100px;
            border-top-left-radius: 0px;
        }
        
        .IndOneM {
            margin-top: 5px;
        }
        
        .mui-show-loading {
            position: fixed;
            padding: 5px;
            width: 120px;
            min-height: 120px;
            top: 45%;
            left: 50%;
            margin-left: -60px;
            background: rgba(0, 0, 0, 0.6);
            text-align: center;
            border-radius: 5px;
            color: #FFFFFF;
            visibility: hidden;
            margin: 0;
            z-index: 2000;
            -webkit-transition-duration: .2s;
            transition-duration: .2s;
            opacity: 0;
            -webkit-transform: scale(0.9) translate(-50%, -50%);
            transform: scale(0.9) translate(-50%, -50%);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }
        
        .mui-show-loading.loading-visible {
            opacity: 1;
            visibility: visible;
            -webkit-transform: scale(1) translate(-50%, -50%);
            transform: scale(1) translate(-50%, -50%);
        }
        
        .mui-show-loading .mui-spinner {
            margin-top: 24px;
            width: 36px;
            height: 36px;
        }
        
        .mui-show-loading .text {
            line-height: 1.6;
            font-family: -apple-system-font, "Helvetica Neue", sans-serif;
            font-size: 14px;
            margin: 10px 0 0;
            color: #fff;
        }
        
        .mui-show-loading-mask {
            position: fixed;
            z-index: 1000;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
        }
        
        .mui-show-loading-mask-hidden {
            display: none !important;
        }
        
        .swiper-slide img,
        #certify .swiper-slide {
            height: auto!important;
        }
        
        .modelbg {
            width: 100%;
            position: fixed;
            top: 0%;
            left: 0px;
            z-index: 1000;
            background-color: #ffffff;
        }
        
        .modelbg embed {
            width: 100%;
        }
        
        .fade-enter-active,
        .fade-leave-active {
            transition: opacity .5s;
        }
        
        .fade-enter,
        .fade-leave-to
        /* .fade-leave-active below version 2.1.8 */
        
        {
            opacity: 0;
        }
    </style>
</head>
<script>
   
</script>

<body>
    <div id="search"> 
        <!--搜索-->
        <header class="mui-bar mui-bar-nav blueBackground" style="background-color: #ffffff!important;">
            <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<font class="mui-icon mui-icon-arrowleft" style="color: rgb(119, 119, 119) !important;;"></font>
				</button>
            <div class="top-blue-search main clearfix">
                <font class="mui-icon mui-icon-search top-blue-search-l fl"></font>
                <input type="search" name="" id="txtkey" value="" class="top-blue-search-r fl" style="background-color: #efefef;" placeholder="请输入关键字" />
            </div>
            <button class="search-btn" id="btnsearch" style="color: rgb(119, 119, 119) !important;">搜索</button>
        </header>
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper list-frame" style="background: #fff!important;">
			<div class="mui-scroll">
        		<div id="search-list">
           

            <div class="search-list">
                <div class="IndOneN IndO1" style=" display:block;padding: 10px;">
                    <div class="IndOneA" v-for="(item,index) in items" style="width: 100%;">
                        <div class="IndOneI" @tap="opendetail(item)">
                            <!-- <div class="bg mui-media-object" :style="{backgroundImage:'url(' + item.pic + ')'}"></div> -->
                            <img :src="item.pic" alt="">
                        </div>
                        <div class="IndOneP">
                            <!-- <div class="IndOneB"><span class="IndOneBtitle">{{item.institution_name}}</span>
							</div> -->
                            <div class="IndOneB"><span class="IndOneBtitle">{{item.institution_name}}</span>
                                <span class="guanzhu" v-if="item.code_status==0" @tap="guanzhu(item,event)">关注</span>
                                <span class="guanzhuOr guanzhu" v-if="item.code_status==1" @tap="guanzhu(item,event)">已关注</span>
                            </div>
                            <div class="IndOneC" @tap="opendetail(item)">
                                <div class="IndOnSty" style="display: flex;flex-wrap: wrap;">
                                    <!-- <img src="../../images/star.png" class="fl" v-for="(star,index) in 5" v-if="index<=item.comment-1" /> -->
                                    <span class="iconfont icon-favorfill" style="font-size: 13px;color: #FECF0E;" v-for="(star,index) in item.comment" v-if="index<=item.comment-1"></span>
                                    <span class="iconfont icon-favorfill" style="font-size: 13px;color: #e9e9e9;" v-for="(star,index) in 5-item.comment"></span>
                                    <span style="margin-left: 3px;">{{item.comment}}分</span> <span style="margin-left: 5px;margin-right: 5px;"> | </span> <span class="IndOeye">{{item.views}}</span>
                                </div>

                            </div>

                            <div class="IndOneE"><span v-for="label in item.type">{{label.dict_field}}</span></div>
                            <div class="IndOneM">
                                <div class="chengqu">{{item.institution_district}} | </div><span class="fr" style="margin-left: 3px;">{{item.distance}}</span></div>
                            <div class="clear"></div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
        </div>
       </div>
    </div>

    <!--轮播banner-->
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/app.js"></script>
    <script src="../../js/token.js"></script>
    <script src="../../js/jquery-1.8.3.min.js"></script>
    <script>
    	
        var self = '';
      
        var keyword = '';
        var state = '';
        var uid = '';
        var pages = 1;
        //var paradata = {}
        //mui初始化，配置下拉刷新
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					auto:true,
					callback: function() {
						pages = 1
						pulldownRefresh(pages)
					}
				},
				up: {
					contentrefresh: '正在加载...',
					callback: function() {
						pages++;
						pullupRefresh(pages)
					}
				}
			}

		});
		
        mui.plusReady(function() {
            self = plus.webview.currentWebview();
           	type = self.type;
           	typeid = self.typeid;
           	keyword = self.keyword;
           
            state = app.getState();
            uid = state.userid;
            memberToken = state.memberToken;
            
            paradata = {
                uid: uid,
                memberToken: memberToken
            };
            
            plus.geolocation.getCurrentPosition(function getinfo(position) {
                var lat = position.coords.latitude; //获取经纬度
                var lng = position.coords.longitude;
                paradata.latitude = lat;
                paradata.longitude = lng;
            }, function(e) {
                console.log("获取百度定位位置信息失败：" + e.message);
            }, {
                provider: 'baidu'
            });
            switch (type) {
                case "dict":
                    paradata.type = typeid;
                    break;
                case "sl":
                    paradata.age = "3";
                    break;
                case "rm":
                    paradata.code = "1";
                    break;
                case "gf":
                    paradata.comment = "1";
                    break;
                case "search":
                    paradata.name = keyword;
                    break;
            }
            paradata.page = pages
            mui.post(Apiurl+'index/institution_new', paradata, function(data) {
            	
                if (data.list && data.list.length > 0) {
                    pullrefresh.items = data.list
                }
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
            }, 'json');
        });

        //下拉刷新
        function pulldownRefresh(pages) {
        
            if (window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
                plus.nativeUI.toast('似乎已断开与互联网的连接', {
                    verticalAlign: 'top'
                });
                return; 
            }
            switch (type) {
                case "dict":
                    paradata.type = typeid;
                    break;
                case "sl":
                    paradata.age = "3";
                    break;
                case "rm":
                    paradata.code = "1";
                    break;
                case "gf":
                    paradata.comment = "1";
                    break;
                case "search":
                    paradata.name = keyword;
                    break;
            }
            paradata.page = pages
            mui.post(Apiurl+'index/institution_new', paradata, function(data) {
            	
                if (data.list && data.list.length > 0) {
                    pullrefresh.items = data.list
                }
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
            }, 'json');
        }
        //上拉加载
        function pullupRefresh(pages) {
            paradata.page = pages;
            //请求机构列表信息流
            mui.post(Apiurl+'index/institution_new', paradata, function(data) {
                if (pages <= data.pagecount) {
                    if (data.list && data.list.length > 0) { 
                        pullrefresh.items = pullrefresh.items.concat(data.list);
                    }
                }
                mui('#pullrefresh').pullRefresh().endPullupToRefresh();
            }, 'json');
        }
        var pullrefresh = new Vue({
            el: '#pullrefresh',
            data: {
                items: []
            },
            methods: {
                opendetail: function(item) {
                    mui.openWindow({
                        url: 'detail.html',
                        id: 'schoolsdetail',
                        extras: {
                            instid: item.institution_id
                        },

                    });
                },
                guanzhu: function(item, event) {
                    plus.webview.getWebviewById("monitor").reload(true);
                    //alert(JSON.stringify(item.institution_id)) 
                    mui.fire(plus.webview.getWebviewById("schoolsrefresh"), 'refreshshcools', {
							msgid: item.institution_id,
							codes:item.codes
					}) 
                    event.stopPropagation();
                    var data = {
                        uid: uid,
                        code: item.code,
                        memberToken: memberToken
                    }
                    if (event.srcElement.innerHTML == '已关注') {
                        item.code_status=0
                        mui.post(Apiurl+'index/institution', data, function(data) {

                            if (data.status == "200") {
                                plus.nativeUI.toast('取消成功', {
                                    verticalAlign: 'middle'
                                });
                            }
                        }, 'json')
                    } else {
                         item.code_status=1; 

                        mui.post(Apiurl+'index/institution', data, function(data) {

                            if (data.status == "200") {
                                plus.nativeUI.toast('关注成功', {
                                    verticalAlign: 'middle'
                                });
                            }
                        }, 'json')
                    }

                },
            }
        });
       var btnsearch = document.getElementById('btnsearch');
        var txtkey = document.getElementById('txtkey');
        //监听搜索按钮点击
        btnsearch.addEventListener('tap', function(event) {
            var paradata = {
                uid: uid,
                name: txtkey.value,
                memberToken: memberToken,
                page:1
            };
            mui.post(Apiurl+'index/institution_new', paradata, function(data) {
                if (!data.error) {
                    console.log(JSON.stringify(data));
                    pullrefresh.items = data.list;
                } else {
                    pullrefresh.items = [];
                }
                return false;
            }, 'json');
        });
        //监听回车事件
        txtkey.addEventListener('keyup', function(event) {
            if (!txtkey.value) return false;
            if (event.keyCode == 13) {
                var paradata = {
                    uid: uid,
                    name: txtkey.value,
                    memberToken: memberToken,
                    page:1
                };
                mui.post(Apiurl+'index/institution_new', paradata, function(data) {
                    if (!txtkey.value) return false;
                    if (!data.error) {
                        console.log(JSON.stringify(data));
                        pullrefresh.items = data.list;
                    } else {
                        pullrefresh.items = [];
                    }
                    return false;
                }, 'json');
            }
        });
    </script>

</body>

</html>